<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading</title>
</head>
    <style>
        div:nth-of-type(1){
            width: 800px;
            height: 600px;
            background: url(img/loading.jpg);
            animation: a 2s steps(15,start) infinite;
        }
        @keyframes a{
            100%{
                background-position: -12000px;
            }
        }
        div:nth-of-type(2){
            width: 518px;
            height: 472px;
            background: url(img/loading1.jpg);
            animation: a1 1s steps(7,start) infinite;
        }
        @keyframes a1{
            100%{
                background-position: -3626px;
            }
        }
        div:nth-of-type(3){
            width: 262px;
            height: 192px;
            background: url(img/loading2.jpg);
            animation: a2 1s steps(8,start) infinite;
        }
        @keyframes a2{
            100%{
                background-position: -2096px;
            }
        }
    </style>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>